<template>
  <div class="app">
    <div class="header">
      <h2>宏烨找房后台管理系统</h2>
    </div>

    <div class="main">
      <div class="main-left">
        <p>{{name}}</p>
        <router-link v-for="(item, index) in items" :key="index" :to="item.path">
          <!-- <div class="link-list"> -->
          <span>
            <i :class="item.icon"></i>
          </span>
          <span>{{item.meta.name}}</span>
          <!-- </div> -->
        </router-link>
      </div>

      <div class="main-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { routes } from "../../router";
import filterRouter from "../../components/filterRoutes";

export default {
  data() {
    return {
      // leftList: filterRouter(
      //   routes[1].children,
      //   sessionStorage.getItem("admin")
      // ),

      name: sessionStorage.getItem("name"),
      items:filterRouter(routes[1].children,sessionStorage.getItem('admin'))
    };
  }
};
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: 10%;
    background-color: rgb(62, 99, 221);
    display: flex;
    align-items: center;
    padding-left: 30px;
    h2 {
      color: #fff;
    }
  }
  .main {
    height: 90%;
    display: flex;
    .main-left {
      width: 13%;
      background-color: rgb(13, 34, 80);
      a {
        // .link-list{
        //   display: flex;
        //   text-align: left;
        // }
        display: inline;
        display: flex;
        justify-content: start;
        // display: block;
        padding: 14px 10px;
        span {
          display: inline;
          padding-left: 6px;
        }
      }
      p {
        height: 80px;
        display: flex;
        color: #858585;
        justify-content: center;
        align-items: center;
      }
    }
    .main-right {
      width: 87%;
      height: 100%;
    }
  }
}
</style>